<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Kanji list</title>

<!-- jQuery Mobile references -->
<link rel="stylesheet" href="css/jquery.mobile-1.4.2.min.css" />
<link rel="stylesheet" href="css/toast.css" type="text/css">
<script src="js/jquery-2.1.0.min.js"></script>
<script src="js/jquery.mobile-1.4.2.min.js"></script>
<script type="text/javascript" src="js/utils.js"></script>
<script src="js/plugins/toast.js"></script>
<script type="text/javascript" src="js/favourite.js"></script>
<script src="js/grammar-detail.js"></script>

<script type="text/javascript">
	$(document).ready(function() {
		$('a[task="favouriteTask"]').click(function() {
			//lay ve id
			var id = getUrlVars()["id"];
			processFavourite('g_', 'grammar', id);
		});
	});
</script>

<style type="text/css">
#addFavourite:after {
	background-image: url("img/star-16-icon.png");
	background-size: 16px 16px;
}
</style>
</head>
<body onload="connectDB();">

	<!-- Start  page -->
	<div data-role="page" id="add-vocabulary-page">

		<!-- header -->
		<div id="minna-header" data-role="header" style="border: none;"
			data-theme="b" data-position="fixed">
			<h1>Chi tiết ngữ pháp</h1>
			
			<a href="grammar.html" id="btnBack" data-ajax="false" 
				class="ui-btn ui-btn-left ui-mini ui-btn-inline ui-corner-all ui-btn-icon-left ui-icon-back">Back</a>
			
				
			<div data-role="controlgroup" data-type="horizontal"
                                class="ui-mini ui-btn-right" data-inline="true">
                                
                                <a id="" task="favouriteTask" href="#" data-ajax="false" data-direction="reverse"
                                        class="ui-btn ui-btn-inline ui-icon-star ui-btn-icon-notext">Add/Remove Favourite</a>

                                <a href="search.html" id="btnSearch" data-iconpos="notext" data-direction="reverse"
                                        data-ajax="false" class="ui-btn ui-btn-inline ui-icon-search ui-btn-icon-notext">Search</a>
                                        
                                <a href="favourite.html?action=grammar" data-ajax="false" data-direction="reverse"
                                        class="ui-btn ui-btn-inline ui-icon-heart ui-btn-icon-notext">Favourite List</a>
             </div>
		</div>
		<!-- /header -->

		<!-- content -->
		<div id="minna-content" data-role="content" role="main">
			<div id="kanji_details" display="block">
				<table data-role="table" id="tbl_kanji_kun" data-mode=""
					class="financial-table-reflow table-stroke">
					<thead>
						<tr style="background-color: rgb(205, 227, 235);">
							<th scope="col" colspan="6"><span style="font-size: 14px"><span
									style="color: rgb(0, 0, 0)">Cấu trúc</span></span></th>
						</tr>
					</thead>

					<div id="test"></div>

					<tbody id="grammar-title">
					</tbody>
					<thead>
						<tr style="background-color: rgb(205, 227, 235);">
							<th scope="col" colspan="6"><span style="font-size: 14px"><span
									style="color: rgb(0, 0, 0)">Ý nghĩa</span></span></th>
						</tr>
					</thead>
					<tbody>
						<tr>
							<td style="width: 20px; background-color: rgb(66, 112, 167);">
								<span style="color: #fff;">☞</span>
							<td style="text-align: left;"><span id="grammar-mean"></span>
							</td>
						</tr>
					</tbody>

					<thead>
						<tr style="background-color: rgb(205, 227, 235);">
							<th scope="col" colspan="6"><span style="font-size: 14px"><span
									style="color: rgb(0, 0, 0)">Giải thích & Hướng dẫn</span></span></th>
						</tr>
					</thead>
					<tbody id="grammar-explain">
					</tbody>
					<thead>
						<tr style="background-color: rgb(205, 227, 235);">
							<th scope="col" colspan="6"><span style="font-size: 14px"><span
									style="color: rgb(0, 0, 0)">Ví dụ</span></span></th>
						</tr>
					</thead>
					<tbody id="grammar-example-js">

					</tbody>
					<thead>
						<tr style="background-color: rgb(205, 227, 235);">
							<th scope="col" colspan="6"><span style="font-size: 14px"><span
									style="color: rgb(0, 0, 0)">Chú ý</span></span></th>
						</tr>
					</thead>
					<tbody id="grammar-note">
					</tbody>
				</table>
			</div>
		</div>
		<!-- /content -->
		<div id="minna-footer" data-role="footer" style="border: none;">
		</div>
		<!-- /footer -->

	</div>
	<!-- /page -->
</body>
</html>